<template>
	<!-- 禁止滚动穿透 -->
	<page-meta :page-style="'overflow:'+(popupVisible?'hidden':'visible')"></page-meta>
	<view class="wallet-container">
		<!-- #ifdef MP-WEIXIN -->
		<qmy-custom-navbar :title="'我的钱包'"></qmy-custom-navbar>
		<!-- #endif -->
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- uni-pay支付插件 -->
		<uni-pay @success="onPaySuccess" @fail="onPayFail" @close="onPayClose" mainColor="#14cc60" ref="pay"></uni-pay>
		<view class="content" :style="{paddingTop: menuObject.height + menuObject.top + 8 + 'px'}">
			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="user-left">
					<image class="avatar" :src="(userInfo.avatar_file && userInfo.avatar_file.url)
						? userInfo.avatar_file.url 
						: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'" mode="aspectFill">
					</image>
					<view class="user-detail">
						<text class="nickname">{{userInfo.nickname}}</text>
					</view>
				</view>
				<view class="rules-btn" @tap="showRulesModal">
					<view class="iconfont ic-wenhao-xianxingyuankuang fs-38 mr-10 col-00ba31"></view>
					<text>规则</text>
				</view>
			</view>

			<!-- 余额卡片 -->
			<view class="balance-card">
				<view class="balance-amount">
					<text class="label">账户余额</text>
					<text
						class="amount">¥{{walletData.data && walletData.data.length?(walletData.data[0].balance/100).toFixed(2) : 0.00}}</text>
				</view>
				<button class="recharge-btn" @tap="showRechargeModal">
					<view class="iconfont ic-chongzhi fs-46 mr-10 col-f"></view>
					<text>立即{{versionAuditStatus?'领取':'充值'}}</text>
				</button>
			</view>

			<!-- 统计数据 -->
			<view class="statistics">
				<view class="stat-item">
					<view class="iconfont ic-quntixiaofei_xiaofeizonge fs-56 mr-10"></view>
					<view class="stat-info">
						<text
							class="stat-value">¥{{walletData.data && walletData.data.length?(walletData.totalExpense/100).toFixed(2) : 0.00}}</text>
						<text class="stat-label">累计消费</text>
					</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="iconfont ic-quntixiaofei_xiaofeizonge fs-56 mr-10"></view>
					<view class="stat-info">
						<text
							class="stat-value">¥{{walletData.data && walletData.data.length?(walletData.totalIncome/100).toFixed(2) : 0.00}}</text>
						<text class="stat-label">累计{{versionAuditStatus?'领取':'充值'}}</text>
					</view>
				</view>
			</view>

			<!-- 活动预估收益山峰图表 -->
			<view class="analysis-section">
				<view class="section-header ali-item-cen mb-20">
					<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"
						style="width: 50rpx;height: 50rpx;"></image>
					<text class="section-title fw-600 fs-32">活动预估收益</text>
				</view>
				<view v-if="walletData.activityIncome && walletData.activityIncome.length > 0" class="chart-container">
					<qiun-data-charts v-show="!popupVisible" type="mount" :opts="activityIncomeOpts"
						tooltipFormat="yAxisDemo1" :chartData="{ series: [{ data: walletData.activityIncome }] }" />
				</view>
				<view v-else class="w-100 text-ali-c ping-30-0 col-87">
					暂无付费活动
				</view>
				<view class="chart-legend">
					<view class="legend-item" v-for="(item, index) in walletData.activityIncome" :key="index">
						<view class="legend-color flex-shrink-0" :style="{background: item.color}"></view>
						<text class="legend-name text-element-1">{{item.name}}</text>
						<text class="legend-value flex-shrink-0 whi-sp">{{item.value + '元'}}</text>
					</view>
				</view>
			</view>

			<!-- 统计图表 -->
			<view class="analysis-section">
				<view class="section-header">
					<view class="tab-selector">
						<text :class="['tab-option', chartType === 'expense' ? 'active' : '']"
							@tap="switchChartType('expense')">消费统计</text>
						<text :class="['tab-option', chartType === 'income' ? 'active' : '']"
							@tap="switchChartType('income')">收入统计</text>
					</view>
				</view>
				<view class="time-range">
					<view class="time-selector">
						<text :class="['time-option', timeRange === 'week' ? 'active' : '']"
							@tap="switchTimeRange('week')">本周</text>
						<text :class="['time-option', timeRange === 'month' ? 'active' : '']"
							@tap="switchTimeRange('month')">本月</text>
						<text :class="['time-option', timeRange === 'year' ? 'active' : '']"
							@tap="switchTimeRange('year')">今年</text>
					</view>
				</view>
				<view v-if="currentChartData && currentChartData.length > 0" class="chart-container">
					<qiun-data-charts v-show="!popupVisible" type="pie" :opts="chartOpts"
						:chartData="{ series: [{ data: currentChartData }] }" tooltipFormat="yAxisDemo1" />
				</view>
				<view v-else class="w-100 text-ali-c ping-30-0 col-87">
					{{ timeRange === 'week' ? '本周' : timeRange === 'month' ? '本月' : '全年' }}暂无数据
				</view>
				<view class="chart-legend">
					<view class="legend-item" v-for="(item, index) in currentChartData" :key="index">
						<view class="legend-color flex-shrink-0" :style="{background: item.color}"></view>
						<text class="legend-name text-element-1">{{item.name}}</text>
						<text class="legend-value flex-shrink-0 whi-sp">{{item.value/100 + '元'}}</text>
					</view>
				</view>
			</view>

			<!-- 账单列表 -->
			<view class="bill-section">
				<view class="section-header bor-bottom-f3">
					<view class="ali-item-cen mb-20">
						<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"
							style="width: 50rpx;height: 50rpx;"></image>
						<text class="section-title">账单明细</text>
					</view>
					<!-- 账单分类 -->
					<v-tabs ref="tabs" :zIndex="1" :scroll="false" bgColor="#ffffff00" pillsColor="#ffffff00"
						fontSize="28rpx" pillsStyle="box" activeFontSize="28rpx" lineHeight="4rpx" :lineScale="0.2"
						activeColor="linear-gradient(to right, #14cc60, #14cc60)" paddingItem="0rpx 40rpx"
						color="linear-gradient(to right, #616161, #616161)" lineColor="#14cc60" v-model="currentTab"
						:tabs="tabs"></v-tabs>
				</view>
				<scroll-view scroll-y="true" v-if="filteredBills && filteredBills.length" class="records-list">
					<view class="record-item" v-for="(bill, index) in filteredBills" :key="index">
						<view class="record-main">
							<text class="record-type">{{bill.comment}}</text>
							<text class="record-time whi-sp">{{$formatDateTime(bill.create_date)}}</text>
						</view>
						<view class="record-details ">
							<text class="record-change " :class="bill.type === 1 ? 'income' : 'expense'">
								{{bill.type === 1 ? '+' : '-'}}{{(bill.money/100).toFixed(2)}}
							</text>
							<text class="record-balance">余额: ¥{{(bill.balance/100).toFixed(2)}}</text>
						</view>
						<text class="record-remark">{{bill.type === 1 ? '收入' : '支出'}}</text>
					</view>
				</scroll-view>
				<view v-else class="text-ali-c ping-30-0 col-87">暂无数据</view>
			</view>
		</view>
		<!-- 充值弹窗 -->
		<uni-popup ref="rechargePopup" type="bottom" background-color="#ffffff" @change="popupChange">
			<view class="recharge-modal">
				<view class="modal-header">
					<text class="modal-title">选择{{versionAuditStatus?'领取':'充值'}}金额</text>
					<text class="close-btn" @tap="closeRechargeModal">×</text>
				</view>
				<view class="amount-options">
					<view v-for="(item, index) in rechargeMenu" :key="index"
						:class="['amount-option', selectedAmount === item.money ? 'selected' : '']"
						@tap="selectAmount(item.money)">
						<text class="amount-tag" v-if="item.is_recommend">推荐</text>
						<text class="amount-value">¥{{item.money}}</text>
						<text class="amount-desc" v-if="item.give_money > 0">送{{item.give_money}}元</text>
					</view>
				</view>
				<view class="custom-amount">
					<text class="custom-label">自定义金额</text>
					<view class="bac-col-fa flex-dir-row ali-item-cen ping-13-25 br-10 custom-input">
						<input class="fs-24 w-100" type="number" confirm-type="done" v-model="customAmount"
							:placeholder="`请输入${versionAuditStatus?'领取':'充值'}}金额；请输入整数，最低1元`"
							placeholder-style="color:#0a2e365e" />
						<text v-if="customAmount&&customAmount.length" class="iconfont  ic-qingchu fs-40 col-0a2e36"
							@click="clearIcon" />
					</view>
				</view>
				<button class="confirm-recharge-btn" @tap="confirmRecharge">
					<text>确认{{versionAuditStatus?'领取':'充值'}}</text>
					<text class="selected-amount">¥{{actualAmount}}</text>
				</button>
			</view>
		</uni-popup>

		<!-- 规则弹窗 -->
		<uni-popup ref="rulesPopup" type="bottom" background-color="#ffffff" border-radius="20rpx 20rpx 0 0"
			@change="popupChange">
			<view class="slanted-rectangle">
				<scroll-view class="h-40-vh ping-30" scroll-y>
					<view class="rule-item" v-for="(rule, index) in rechargeRules" :key="index">
						<view class="rules-title mb-20">{{ rule.title }}</view>
						<view>
							<mp-html :content="rule.content"></mp-html>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				// 支付参数开始
				type: "recharge", // 支付回调类型 如 recharge 代表余额充值 goods 代表商品订单（可自定义，任意英文单词都可以，只要你在 uni-pay-co/notify/目录下创建对应的 xxx.js文件进行编写对应的回调逻辑即可）
				// 支付参数结束
				tokenExpired: null, //token过期时间
				walletData: {},
				dataLoaded: false,
				rechargeMenu: [],
				currentTab: 0,
				tabs: ['全部', '收入', '支出'],
				timeRange: 'week',
				chartOpts: {
					type: 'pie',
					padding: [15, 15, 15, 15],
					legend: {
						show: false
					}
				},
				chartData: {
					series: [{
						data: []
					}]
				},
				incomeChartData: {
					series: [{
						data: []
					}]
				},
				rechargeRules: [],
				selectedAmount: 100, // 默认充值金额
				customAmount: '', //自定义金额
				popupVisible: false, // 充值弹窗打开状态
				versionAuditStatus: true, // 版本状态
				chartType: 'expense',
				yearData: {
					expense: [],
					income: []
				},
				colorArray: [],
				activityIncomeOpts: {
					type: 'mount',
					padding: [15, 15, 15, 15],
					legend: {
						show: false
					},
					extra: {
						mount: {
							linearType: 'none',
						}
					}
				},
			}
		},
		computed: {
			filteredBills() {
				if (this.currentTab === 0) return this.walletData.data;
				return this.walletData.data.filter(bill =>
					this.currentTab === 1 ? bill.type === 1 : bill.type === 2
				);
			},
			actualAmount() {
				const amount = this.customAmount || this.selectedAmount;
				return amount;
			},
			userInfo() {
				// token过期检查已在认证管理器中处理
			this.tokenExpired = Date.now() + 24 * 60 * 60 * 1000; //token过期时间
				return store.userInfo //用户信息
			},
			currentChartData() {
				if (!this.yearData || (!this.yearData.expense.length && !this.yearData.income.length)) {
					return [];
				}

				const now = new Date();
				const data = this.chartType === 'expense' ? this.yearData.expense : this.yearData.income;

				// 根据时间范围筛选数据
				let filteredData = data.filter(item => {
					const itemDate = new Date(item.create_date);
					if (this.timeRange === 'week') {
						const dayOfWeek = now.getDay() || 7;
						const startOfWeek = new Date(now);
						startOfWeek.setDate(now.getDate() - dayOfWeek + 1);
						startOfWeek.setHours(0, 0, 0, 0);
						const endOfWeek = new Date(startOfWeek);
						endOfWeek.setDate(startOfWeek.getDate() + 6);
						endOfWeek.setHours(23, 59, 59, 999);
						return item.create_date >= startOfWeek.getTime() && item.create_date <= endOfWeek
							.getTime();
					} else if (this.timeRange === 'month') {
						const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
						const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
						endOfMonth.setHours(23, 59, 59, 999);
						return item.create_date >= startOfMonth.getTime() && item.create_date <= endOfMonth
							.getTime();
					}
					return true; // 年度数据不需要过滤
				});

				// 按评论分组并计算总额
				const groupedData = {};
				filteredData.forEach(item => {
					if (!groupedData[item.comment]) {
						groupedData[item.comment] = 0;
					}
					groupedData[item.comment] += item.money;
				});

				// 转换为图表所需格式
				return Object.entries(groupedData).map(([comment, total], index) => ({
					name: comment,
					value: total,
					color: this.colorArray[index % this.colorArray.length] ||
						`#${Math.floor(Math.random() * 16777215).toString(16)}`
				}));
			}
		},
		onShow() {
			// 查询版本
			this.getVersionAuditStatus();
			// 查询用户余额记录
			this.getBalance();
			// 查询充值套餐列表
			this.getRechargeMenu();
			// 查询充值规则
			this.getRechargeRules();
		},
		methods: {
			// 查询版本
			getVersionAuditStatus() {
				this.$Route('get-public-data', true).getVersionAuditStatus().then((res) => {
					this.versionAuditStatus = res.data[0].status;
				});
			},
			// 查询用户余额记录
			getBalance() {
				this.dataLoaded = false;
				this.$Route('get-private-data', true).getMyWalletData().then((res) => {
					this.walletData = res.data;
					this.yearData = res.data.yearData;
					this.colorArray = res.data.colorArray;
					this.dataLoaded = true;
				}).catch((err) => {
					this.dataLoaded = true;
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				});
			},
			// 查询充值套餐列表
			getRechargeMenu() {
				this.$Route('get-public-data', true).getRechargeMenu().then((res) => {
					this.rechargeMenu = res.data;
				});
			},
			// 查询充值规则
			getRechargeRules() {
				this.$Route('get-public-data', true).getRefundPolicy('67e276c1bd02205f7b372a0a').then((res) => {
					this.rechargeRules = res.data[0].articles;
				});
			},
			switchTimeRange(range) {
				this.timeRange = range;
			},
			showRechargeModal() {
				this.$refs.rechargePopup.open();
			},
			closeRechargeModal() {
				this.$refs.rechargePopup.close();
				this.customAmount = '';
			},
			showRulesModal() {
				this.$refs.rulesPopup.open();
			},
			closeRulesModal() {
				this.$refs.rulesPopup.close();
			},
			selectAmount(amount) {
				this.selectedAmount = amount;
				this.customAmount = '';
			},
			popupChange(e) {
				if (e.show) {
					this.popupVisible = e.show;
				} else {
					setTimeout(() => {
						this.popupVisible = e.show;
					}, 100)
				}
			},
			confirmRecharge() {
				if (this.versionAuditStatus) {
					return this.$Toast('由于相关规范，iOS功能暂不可用');
				}
				if (this.tokenExpired < Date.now()) {
					this.$Toast('登录状态过期，请重新登录');
					setTimeout(() => {
						this.$NavigateTo('/qmy_user/login');
					}, 1000);
					return;
				}
				const strValue = String(this.actualAmount);
				if (!/^[1-9]\d*$/.test(strValue)) {
					this.$Toast('请输入正整数');
					return;
				}
				this.openPay();
			},
			clearIcon() {
				this.customAmount = '';
			},
			// 开始支付
			openPay() {
				// 防抖
				this.$debounce(() => {
					// 跳转支付收银台页
					// let options = {
					// 	total_fee: this.rechargeValue, // 支付金额，单位分 100 = 1元（注意：因为是前端传的，此参数可能会被伪造，回调时需要再校验下是否和自己业务订单金额一致）
					// 	order_no: this.generateOrderNumber(), // 业务系统订单号（即你自己业务系统的订单表的订单号）
					// 	out_trade_no: this.generateOrderNumber() + '-1', // 插件支付单号
					// 	description: '积分充值', // 支付描述
					// 	type: this.type, // 支付回调类型
					// };
					// let optionsStr = encodeURI(JSON.stringify(options));
					// this.$NavigateTo(`/pages/detail/pay-desk?options=${optionsStr}`);
					// 打开支付收银台
					this.$refs.pay.open({
						total_fee: Number.isFinite(Number(this.actualAmount)) ? Math.round(Number(this
							.actualAmount) * 100) :
						0, // 支付金额，单位分 100 = 1元（注意：因为是前端传的，此参数可能会被伪造，回调时需要再校验下是否和自己业务订单金额一致）
						order_no: this.generateOrderNumber(), // 业务系统订单号（即你自己业务系统的订单表的订单号）
						out_trade_no: 'QMY' + this.generateOrderNumber(), // 插件支付单号
						description: '余额充值', // 支付描述
						type: this.type, // 支付回调类型
					});
				}, 500, true, "openPay")
			},
			// 唯一订单号生成函数（移到模块外部）
			generateOrderNumber() {
				const timestamp = Date.now(); // 获取毫秒级时间戳
				const randomNum = Math.floor(Math.random() * 1000000); // 6位随机数
				return `${timestamp}${randomNum}`;
			},
			onPaySuccess(res) {
				// 关闭弹窗
				this.closeRechargeModal();
				if (res.user_order_success) {
					// 代表用户已付款，且你自己写的回调成功并正确执行了
					this.$Toast('充值成功')
				} else {
					// 代表用户已付款，但你自己写的回调执行失败（通常是因为你的回调代码有问题）
					this.$Toast('充值失败，请联系管理员退款')
				}
			},
			onPayFail() {
				this.$Toast('充值失败')
			},
			onPayClose() {
				this.$Toast('取消充值')
			},
			switchChartType(type) {
				this.chartType = type;
			},
		}
	}
</script>

<style lang="scss">
	.wallet-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-bottom: 30rpx;

		.content {
			padding: 0 30rpx;
		}

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;

			.user-left {
				display: flex;
				align-items: center;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(20, 204, 96, 0.1);
			}

			.user-detail {
				margin-left: 20rpx;

				.nickname {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.user-id {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}

			.rules-btn {
				display: flex;
				align-items: center;
				padding: 12rpx 24rpx;
				background: rgba(20, 204, 96, 0.1);
				border-radius: 30rpx;

				text {
					font-size: 26rpx;
					color: #14cc60;
				}
			}
		}

		.balance-card {
			position: relative;
			padding: 30rpx;
			background: url('https://gd-hbimg.huaban.com/078703f55474b1c4f67418a944bcb0bd6ba15d36333d-gDNHQr_fw1200');
			background-size: 100% 100%;
			border-radius: 24rpx;
			color: #fff;
			overflow: hidden;

			.balance-amount {
				position: relative;

				.label {
					font-size: 28rpx;
					opacity: 0.9;
				}

				.amount {
					display: block;
					font-size: 60rpx;
					font-weight: 600;
					margin: 16rpx 0;
					font-family: 'DIN Alternate';
				}
			}

			.recharge-btn {
				position: relative;
				display: inline-flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.2);
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				border-radius: 30rpx;
				margin-top: 20rpx;
				height: 90rpx;
				line-height: 90rpx;

				text {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}

		.statistics {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			margin: 30rpx 0;

			.stat-item {
				flex: 1;
				display: flex;
				align-items: center;

				.stat-info {
					.stat-value {
						display: block;
						font-size: 36rpx;
						color: #333;
						font-weight: 600;
						font-family: 'DIN Alternate';
					}

					.stat-label {
						font-size: 24rpx;
						color: #999;
						margin-top: 6rpx;
					}
				}
			}

			.stat-divider {
				width: 1rpx;
				height: 50rpx;
				background: #eee;
				margin: 0 30rpx;
			}
		}

		.analysis-section {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.section-header {
				.tab-selector {
					display: flex;
					justify-content: center;
					border-bottom: 2rpx solid #f5f5f5;
					padding-bottom: 20rpx;

					.tab-option {
						position: relative;
						padding: 0 60rpx;
						font-size: 32rpx;
						color: #999;
						transition: all 0.3s;
						font-weight: 400;

						&.active {
							color: #333;
							font-weight: 600;

							&::after {
								content: '';
								position: absolute;
								left: 50%;
								bottom: -22rpx;
								transform: translateX(-50%);
								width: 40rpx;
								height: 6rpx;
								background: #14cc60;
								border-radius: 6rpx;
							}
						}
					}
				}
			}

			.time-range {
				display: flex;
				flex-direction: column;
				margin: 30rpx 0;

				.time-label {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 16rpx;
					padding-left: 4rpx;
				}

				.time-selector {
					display: flex;
					background: #f8f8f8;
					border-radius: 12rpx;
					padding: 4rpx;

					.time-option {
						flex: 1;
						text-align: center;
						padding: 16rpx 0;
						font-size: 26rpx;
						color: #666;
						transition: all 0.3s;
						position: relative;

						&.active {
							color: #14cc60;
							font-weight: 500;
							background: #fff;
							border-radius: 8rpx;
							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
						}
					}
				}
			}

			.chart-container {
				margin-top: 20rpx;
			}

			.chart-legend {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.legend-item {
					display: flex;
					align-items: center;
					width: 50%;
					margin-top: 16rpx;

					.legend-color {
						width: 20rpx;
						height: 20rpx;
						border-radius: 4rpx;
						margin-right: 8rpx;
					}

					.legend-name {
						font-size: 24rpx;
						color: #666;
						margin-right: 8rpx;
					}

					.legend-value {
						font-size: 24rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}

		.bill-section {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;

			.section-header {
				margin-bottom: 20rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}
			}
		}

		.recharge-modal {
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.close-btn {
					font-size: 40rpx;
					color: #999;
					padding: 10rpx;
				}
			}

			.amount-options {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;

				.amount-option {
					position: relative;
					height: 120rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #eee;
					border-radius: 12rpx;

					.amount-tag {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						background: #ff6b6b;
						color: #fff;
						font-size: 20rpx;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
					}

					&.selected {
						background: rgba(20, 204, 96, 0.1);
						border-color: #14cc60;

						.amount-value {
							color: #14cc60;
						}
					}

					.amount-value {
						font-size: 36rpx;
						color: #333;
						font-weight: 500;
						font-family: 'DIN Alternate';
					}

					.amount-desc {
						font-size: 22rpx;
						color: #ff6b6b;
						margin-top: 8rpx;
					}
				}
			}

			.custom-amount {
				margin-top: 30rpx;

				.custom-label {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 30rpx;
					display: block;
				}

				.custom-input {
					height: 80rpx;
				}
			}

			.confirm-recharge-btn {
				margin-top: 30rpx;
				background: #14cc60;
				color: #fff;
				border: none;
				font-size: 32rpx;
				padding: 8rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.selected-amount {
					margin-left: 12rpx;
					font-family: 'DIN Alternate';
				}
			}
		}

		.recharge-modal::before {
			content: '';
			position: absolute;
			top: -50rpx;
			z-index: -1;
			left: 0;
			width: 100%;
			height: 50%;
			background-color: white;
			transform: skewY(3deg);
			border-radius: 40rpx 40rpx 0 0;
		}

		.rules-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.rule-item {
			display: flex;
			margin-bottom: 24rpx;
			flex-direction: column;
		}
	}

	.slanted-rectangle {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 20rpx;
		bottom: -20rpx;
		z-index: 2;
	}

	.slanted-rectangle::before {
		content: '';
		position: absolute;
		top: -56rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	.records-tabs {
		display: flex;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 15rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}

	.active-tab {
		color: #14cc60;
		font-weight: bold;
	}

	.active-tab::after {
		content: '';
		position: absolute;
		bottom: -15rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #14cc60;
		border-radius: 2rpx;
	}

	.records-list {
		height: 600rpx;
	}

	.record-item {
		background-color: #f7f7f7;
		border-radius: 12rpx;
		padding: 25rpx;
		margin-bottom: 20rpx;
	}

	.record-item:last-child {
		margin-bottom: 0;
	}

	.record-main {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.record-type {
		font-size: 28rpx;
		color: #333;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
	}

	.record-details {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.record-change {
		font-size: 36rpx;
		font-weight: bold;
		font-family: DIN;
	}

	.record-change.income {
		color: #14cc60;
	}

	.record-change.expense {
		color: #ff4d4f;
	}

	.record-balance {
		font-size: 24rpx;
		color: #666;
	}

	.record-remark {
		font-size: 24rpx;
		color: #999;
	}

	::v-deep .uni-popup {
		z-index: 999999 !important;
	}
</style>